<template>
  <div>
    <div class="safety-issue" v-if="isShow">
      <mt-header fixed title="国和一号安全质量意见收集箱"></mt-header>
      <div class="safety-issue-label"><span style="color: red">*</span> 标题</div>
      <mt-field placeholder="标题（限制字数30）" v-model="title"></mt-field>
      <div class="safety-issue-label"><span style="color: red">*</span> 建议或意见</div>
      <mt-field placeholder="请描述您的建议或意见..." type="textarea" rows="3" v-model="description"></mt-field>
      <div class="safety-issue-label">附件</div>
      <div class="issue-img-block">
        <div>
          <span v-for="(item,index) in srcData" :key="index" class="issue-img" >
              <img class="img-data" :src="item.urlData" @click="previewImg(index)"/>
              <img class="img-close" src="../assets/close.png" @click="closeImg(index)"/>
          </span>
          <img class="issue-img" src="../assets/addImg.png"  @click="addImg()"/>
          <input id="upload_file" type="file" class="file-input" accept="image/*" multiple @change="inputChange" style="display: none" />
        </div>
      </div>
      <div class="safety-issue-label">联系方式</div>
      <mt-field placeholder="电话或邮箱" v-model="contact_way"></mt-field>
      <div style="padding: 0 10px">
        <span class="remind-info">一经采纳的建议、意见，我们将视情况给与奖励，建议您留下联系方式。</span>
      </div>
      <div class="safety-issue-btn">
        <mt-button type="primary" size="large" @click="submitData">提交</mt-button>
      </div>
    </div>
    <div v-else class="preview-img-block" @click="isShow=true">
      <mt-swipe :auto="0" :defaultIndex="defaultIndex">
        <mt-swipe-item v-for="(item, index) in srcData" :key="index">
          <div class="img-swipe-item">
            <img class="preview-img" :src="item.urlData"/>
          </div>
        </mt-swipe-item>
      </mt-swipe>
    </div>
  </div>
</template>

<script>
import request from '@/uitls/request'
import uploaderFile from '@/components/uploader-file'
export default {
  name: 'HelloWorld',
  data () {
    return {
      list: [],
      imgList: [],
      fileReader: '',
      srcData: [],
      isShow: true,
      submitFormData: {},
      title: '',
      description: '',
      contact_way: '',
      defaultIndex: 0
    }
  },
  components: {
    'uploader-file': uploaderFile
  },
  mounted () {
    if (!window.FileReader) {
      console.error('Your browser does not support FileReader API!')
    }
    this.fileReader = new FileReader() // FileReader 对象
    this.submitFormData = new window.FormData() // FormData 对象
  },
  methods: {
    previewImg (index) {
      this.isShow = false
      this.defaultIndex = index
    },
    closeImg (index) {
      this.srcData.splice(index, 1)
    },
    addImg () {
      document.getElementById('upload_file').click()
    },
    inputChange (e) { // input 值发生变化时调用
      const files = e.target.files
      this.recursion(files, 0)
    },
    recursion (files, index) { // 递归多文件
      this.fileReader.readAsDataURL(files[index]) // 将文件读取成 DataURL
      this.fileReader.onload = () => { // 读取文件为 dataURL 完成后调用
        this.srcData.push({urlData: this.fileReader.result, file: files[index]})
        if (index < files.length - 1) {
          this.recursion(files, index + 1)
        }
      }
    },
    submitData () { // 提交数据
      if (!this.title) {
        this.$toast('标题不能为空...')
        return
      } else if (this.title.length > 30) {
        this.$toast('标题长度不能超过30个字符...')
        return
      }
      if (!this.description) {
        this.$toast('建议或意见不能为空...')
        return
      }
      this.$indicator.open({
        spinnerType: 'fading-circle'
      })
      for (let i = 0; i < this.srcData.length; i++) {
        this.submitFormData.append('attach_list', this.srcData[i].file)
      }
      this.submitFormData.append('title', this.title)
      this.submitFormData.append('description', this.description)
      this.submitFormData.append('contact_way', this.contact_way)
      request({
        method: 'post',
        url: '/feedback/add',
        data: this.submitFormData,
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then((res) => { // 成功后清空数据
        this.$toast('提交成功！')
        this.$indicator.close()
        this.title = ''
        this.description = ''
        this.contact_way = ''
        this.srcData = []
        this.submitFormData = new window.FormData() // 重新new 对象，清空作用
      }).catch((res) => {
        this.$indicator.close()
        this.submitFormData = new window.FormData()
        this.$toast('服务出错了...')
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.safety-issue{
  padding-top: 40px;
}
.safety-issue-label {
  height: 40px;
  line-height: 40px;
  padding-left: 20px;
  color: #656b79;
}
.issue-img-block{
  padding-bottom: 10px;
  background-color: white;
}
.issue-img{
  width: 29%;
  height: 100px;
  margin: 3% 0 0 6px;
  position: relative;
}

.issue-img .img-data{
  width: 29%;
  height: 100px;
}
.issue-img .img-close{
  width: 20px;
  height: 20px;
  position: absolute;
  right: 3px;
  top: -90px;
}
.preview-img{
  width: 100%;
  height:auto;
  max-width:100%;
}
.preview-img-block {
  height: 100vh;
  background-color: black;
}
.img-swipe-item{
  height: 100vh;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
  .safety-issue-btn{
    padding: 10px 40px;
  }
  .remind-info{
    font-size: small;
    color: rgba(0, 0, 0, 0.5);
  }
</style>
